[Day9] 14 Must Know Dev Tools Tricks

14個必須知道的開發工具技巧

需要用到的技巧與練習目標

1. Break on / attribute modifications 除錯
2. console.log 運用

console.log 運用

//--- Intenpolated ---//
console.log("hello this a %s" , 'cat')
// %s 為帶入的變數代號

//--- styled ---//
console.log('%c I am some graet text',font-size:50px; background:red;)
// %c 可以帶入css

//--- warnig ---//
console.warn('oh Nooo')

//--- error ---//
console.error('shit')

//--- info ---//
console.info('this is info')

//--- Testing ---//
const p = document.querySelector('p');
console.assert(p.classList.contains('ouch'),'this is wrong!');

//測試如果回傳是 false 則會回傳 'this is wrong!'(後方填寫的字樣)

//--- clearing ---//
console.clear()
//清除console上面的資訊

//--- viewing DOM Elements ---//
const p = document.querySelector('p');

console.log(p) //獲取 DOM 元素
console.dir(p) //獲取 DOM 元素的相關資訊

//--- Grouping together ---//
//可以用變數判斷 並將同變數的群組

const dogs =[{name:'BOb',age:2},{name:'Mike',age:8}]

dogs.forEach(dog => {
console.group(`${dog.name}`);
console.log(`this is ${dog.name}`);
console.log(`${dog.name} is ${dog.age} years old`)
console.groupEnd(`${dog.name}`);
})

console.groupCollapsed(`${dog.name}`);
//和 console.group(`${dog.name}`)功能一樣，只是呈現方式為合起來而非展開。 


//--- counting ---//
//幫忙計算總共有幾相同的值

console.count('Wes')
console.count('Steve')
console.count('Wes')
console.count('Wes')
console.count('Steve')

//最後會回傳 Wes:3,Steve:2 

//--- timing ---//
//計算資料回傳花費多少時間

console.time('fetching data') //開始計算的時間
fetch('https://api.github.com/users/wesbos')
.then(data => data.json())
.then(data => {
  console.timeEnd('fetching data'); //結束的時間
  console.log(data);
});

//會回傳 fetching data:'所花費的時間'


//--- table ---//
//傳入陣列會回傳表格型式的列表
console.table(dogs)